
import React, { useCallback, useEffect, useReducer, useState } from "react"
import { connect } from 'react-redux'
import { getMenuAct, getTokenAct, getUserInfoAct } from "../../store/action/common"
import { Button, Checkbox, message } from 'antd'
import { loginApi, userInfoApi, userMenuApi } from "../../apis/userApi"
import md5 from "crypto-js/md5"
import aes from "crypto-js/aes"
import { enc } from "crypto-js/core"


const reducer = function(state,action){
    let newState=JSON.parse(JSON.stringify(state))
    switch(action.tupe){
        case 'id':
            newState.id=action.value
            return newState
        case 'password':
            newState.password = action.value
            return newState
        case 'remember':
            newState.remember = action.value
            return newState
    }
}
function Login({history,dispatch}){
    //用useState拿到data和设置data的方法
    const [data,setData]=useState({id:'',password:'',remember:false})
    //副作用钩子函数处理记住密码业务
    useEffect(function(){
        //取数据
        let cache=localStorage.getItem('remember-info')
        //判断是否存在
        if(!!cache){
            try {
                cache =
                //解密
                 aes.decrypt(cache, 'aljdlfjsalfdlksajf').toString(enc.Utf8).split('&')
                 //设置数据
                setData({id: cache[0], password: cache[1], remember: true})
            } catch {}

        }
    },[])
    const loginEvt=useCallback(function(){
        loginApi({id:data.id,password:md5(data.password).toString()}).then(d=>{
            console.log(d);
            if(d.code===200){
                //获取token数据
                dispatch(getTokenAct(d.data.token))
                //获取用户信息
                dispatch(getUserInfoAct(d.data.id))
                return userMenuApi()
            }else{
                message.error('用户登录失败');
            }
        }).then(d=>{

            dispatch(getMenuAct(d.data))
            if (data.remember) {
                localStorage.setItem('remember-info', aes.encrypt(data.id + '&' + data.password, 'aljdlfjsalfdlksajf').toString())
            } else {
                localStorage.removeItem('remember-info')
            }
            history.push('/home')
        })
    },[ data ])
    return(
        <div>
        <div>
            <span>登录页面</span>
            <div>
                用户编码
                <input value={data.id} onChange={
                    function(evt) {
                        // setData是给data重新赋值，那么如果data是一个对象，那么就应该对对象进行拷贝，对数据值进行重写
                        setData({...data, id: evt.target.value})
                    }
                } placeholder="输入用户编码"/>
            </div>
            <div>
                用户密码
                <input value={data.password} onChange={
                    evt => {
                        setData({...data, password: evt.target.value})
                    }
                } placeholder="输入用户密码" type='password'/>
         
            </div>
            <Checkbox checked={data.remember} onChange={
                function(evt) {
                    setData({...data, remember: evt.target.checked})
                }
            }>记住密码？</Checkbox>
            <Button onClick={ loginEvt } block type="primary" disabled={!data.id || !data.password}>登录</Button>
         
        </div>
    </div>
    )
}
export default connect()(Login)